import React from 'react';
import { Dropdown, Space, Button } from 'antd';
import { GlobalOutlined, BgColorsOutlined } from '@ant-design/icons';
import { useModel } from '@umijs/max';
import { theme } from 'antd';
import styles from './index.less';

const { defaultAlgorithm, darkAlgorithm } = theme;

const ThemeSwitch: React.FC = () => {
  const { setLocale, locale, setPrimaryColor } = useModel('global');

  const languages = [
    { key: 'zh-CN', label: '中文' },
    { key: 'en-US', label: 'English' },
  ];

  // 参考 antd 官网的预设主题色
  const colors = [
    { key: '#1677ff', label: '默认蓝' },
    { key: '#F5222D', label: '薄暮红' },
    { key: '#FA541C', label: '火山橙' },
    { key: '#FAAD14', label: '日暮黄' },
    { key: '#13C2C2', label: '明青色' },
    { key: '#52C41A', label: '极光绿' },
    { key: '#2F54EB', label: '极客蓝' },
    { key: '#722ED1', label: '酱紫色' },
  ];

  return (
    <div className={styles.container}>
      <Space>
        <Dropdown
          menu={{
            items: languages.map(lang => ({
              key: lang.key,
              label: lang.label,
              onClick: () => setLocale(lang.key as 'zh-CN' | 'en-US'),
            })),
          }}
        >
          <Button icon={<GlobalOutlined />}>
            {languages.find(lang => lang.key === locale)?.label || '选择语言'}
          </Button>
        </Dropdown>

        <Dropdown
          menu={{
            items: colors.map(color => ({
              key: color.key,
              label: (
                <div className={styles.colorOption}>
                  <div
                    className={styles.colorBlock}
                    style={{ backgroundColor: color.key }}
                  />
                  {color.label}
                </div>
              ),
              onClick: () => setPrimaryColor(color.key),
            })),
          }}
        >
          <Button icon={<BgColorsOutlined />}>主题色</Button>
        </Dropdown>
      </Space>
    </div>
  );
};

export default ThemeSwitch; 